<script src="@/js/culture/shengxiao.js"></script>

<template>
  <div class="shengxiao" id="app">
    <div class="margins">

      <!-- 导航 -->
      <el-affix>
        <div class="affix">
          <Breadcrumb separator=">">
            <span v-for="item in navigations" :key="item">
              <BreadcrumbItem :to="item.link">
                <Icon :type="item.icon" />
                {{ item.title }}
              </BreadcrumbItem>
            </span>
          </Breadcrumb>
        </div>
        <div class="divider">
          <el-divider />
        </div>
      </el-affix>

      <!-- 数据 -->
      <div class="data">

        <el-row :gutter="15">
          <el-col :span="21">
            <el-card shadow="always" class="card1">

              <el-row :gutter="40">
                <el-col :span="12">
                  <el-card shadow="never" class="option-card">
                    <div class="title" @click="pageTable = 0">
                      基本介绍
                      <span v-show="pageTable === 0">
                        <Icon type="ios-arrow-dropdown-circle" />
                      </span>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card shadow="never" class="option-card">
                    <div class="title" @click="pageTable = 1">
                      详细解读
                      <span v-show="pageTable === 1">
                        <Icon type="ios-arrow-dropdown-circle" />
                      </span>
                    </div>
                  </el-card>
                </el-col>
              </el-row>

              <div class="content">
                <div v-show="pageTable === 0">

                  <div>
                    <el-tag round type="info" effect="dark">
                      <span>何谓生肖？</span>
                    </el-tag>
                  </div>
                  <div>
                    生肖也称为属相，是中国传统文化中的一种记年方式，是一种十二年一个循环的纪年系统，每年用一种动物来代表，是由十二地支演变而来，
                    即：<b><u>鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪</u></b>。
                  </div>
                  <br />
                  <div>
                    <el-tag round type="info" effect="dark">
                      <span>生肖的起源</span>
                    </el-tag>
                  </div>
                  <div>
                    <div>
                      据湖北云梦睡虎地和甘肃天水放马滩出土的秦简可知，先秦时期即有比较完整的生肖系统存在。最早记载与现代相同的十二生肖的传世文献是东汉王充的《论衡》。
                    </div>
                  </div>
                  <br />
                  <div>
                    <el-tag round type="info" effect="dark">
                      <span>&nbsp;&nbsp;生肖文化&nbsp;&nbsp;</span>
                    </el-tag>
                  </div>
                  <div>
                    <div>
                      生肖文化在中国历史中占据了重要的地位，它不仅仅是一种民俗符号，更是中华民族文化不可分割的一部分。每一个生肖都有其独特的象征意义和文化内涵，这些象征意义和文化内涵在人们的生活中发挥着重要的作用。
                    </div>
                    <br />
                    <div>
                      体现了人们对和谐社会的追求。在十二生肖中，每一个动物都有其独特的性格和特点，但它们却能和谐共处，共同构成一个完整的体系。这种和谐共处的精神，也体现在人们的社会生活中，倡导相互尊重、和谐共处的社会风尚。
                    </div>
                    <br />
                    <div>
                      在现代社会中，随着科技的发展和文化的多元化，生肖文化的影响力可能在一定程度上有所减弱。但尽管如此，它依然是中国文化的重要组成部分，被广大人民所珍视和传承。
                    </div>
                  </div>

                </div>
                <div v-show="pageTable === 1">

                  <div>
                    <span>
                      <el-autocomplete size="small" maxlength="1" show-word-limit value-key="name" :debounce="300"
                        v-model="queryData" :fetch-suggestions="querySearch" @click.native="pageData2" clearable
                        placeholder="请输入生肖名称（如：鼠）" style="width:260px;">
                        <template #prefix>
                          <el-icon class="el-input__icon">
                            <search />
                          </el-icon>
                        </template>
                        <template #default="{ item }">
                          <span v-html="brightenKeyword(item.name, queryData) "></span>
                        </template>
                      </el-autocomplete>
                    </span>
                    <span>
                      &nbsp;
                      <Button size="small" icon="ios-search" @click="">搜索</Button>
                    </span>
                    <span class="page">
                      <el-pagination small background class="pageList" :pager-count="3"
                        :page-sizes="[10, 20, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                        :total="dataTotal" :current-page.sync="page" :page-size="pageSize"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                      </el-pagination>
                    </span>
                  </div>

                  <div class="divider">
                    <el-divider />
                  </div>

                  <div v-show="data && data.length !== 0">
                    <div v-for="item in data" :key="item" class="for">
                      <el-card shadow="hover">
                        <div class="name">【<b v-html="showDataMethod(item.name)"></b>】</div>

                        <div>
                          <b>取数： </b>
                          {{ item.number }}
                        </div>
                        <div>
                          <b>寓意： </b>
                          {{ item.moral }}
                        </div>
                        <div>
                          <b>五行：</b>
                          {{ item.wuXing }}
                        </div>
                        <div>
                          <b>地支：</b>
                          {{ item.diZhi }}
                        </div>
                        <div>
                          <b>时辰：</b>
                          {{ item.shiChen }}
                        </div>
                        <div>
                          <b>三合： </b>
                          {{ item.sanHe }}
                        </div>
                        <div>
                          <b>六合： </b>
                          {{ item.liuHe }}
                        </div>
                        <div>
                          <b>六冲： </b>
                          {{ item.liuChong }}
                        </div>
                        <br />
                        <div>
                          <b>本命楼层： </b>
                          {{ item.louCengBm }}
                        </div>
                        <div>
                          <b>财富楼层： </b>
                          {{ item.louCengCf }}
                        </div>
                        <div>
                          <b>贵人楼层： </b>
                          {{ item.louCengGr }}
                        </div>
                        <div>
                          <b>忌讳楼层： </b>
                          {{ item.louCengJi }}
                        </div>
                        <br />
                        <div>
                          <b>吉利颜色： </b>
                          {{ item.colorAuspicious }}
                        </div>
                        <div>
                          <b>忌讳颜色： </b>
                          {{ item.colorUnfortunate }}
                        </div>

                        <div class="index">
                          {{ item.id }}
                        </div>
                      </el-card>
                    </div>
                  </div>
                  <div v-show="data.length === 0" class="null">
                    暂无数据
                  </div>

                </div>
              </div>

            </el-card>
          </el-col>

          <el-col :span="3">
            <el-card shadow="never" class="card2">
              <div class="header">
                更多
              </div>

              <div class="selest">
                <div v-for="item in mores" :key="item" class="item">
                  <router-link :to="item.link">
                    <div class="title">
                      <Icon type="ios-arrow-dropright" />
                      {{ item.title }}
                    </div>
                  </router-link>

                </div>

                <div class="plan">
                  敬请期待 ...
                </div>
              </div>
            </el-card>
          </el-col>

        </el-row>

      </div>

    </div>
  </div>
</template>

<style scoped lang="less" src="@/css/culture/shengxiao.scss"></style>
